<template>
    <div class="my-tag">
              <input 
               @keyup.enter="handleEnter"
              @blur="isEditing = false"
              v-focus
              v-if="isEditing"
                class="input"
                type="text"
                placeholder="输入标签"
              />
              <div 
              @dblclick="handleDoubleClick"
              v-else
              class="text">
               {{ this.value }}
              </div>
            </div>
</template>

<script>
export default {
  props: {
      value: String // 标签
  },
    data() {
      return {
        isEditing: false,
      }
    },
  methods: {
    handleDoubleClick() {
      this.isEditing = true;
    },
    handleEnter(e) {
      console.log("enter")
      if(e.target.value.trim()=== '') return alert('标签不能为空');
      this.$emit('input', e.target.value.trim());
      this.isEditing = false;
    }
}
}
</script>

<style lang="less" scoped>
 .my-tag {
    cursor: pointer;
    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
      &::placeholder {
        color: #666;
      }
    }
  }

</style>